<template>
    <el-dialog class="edit-dialog edit-dialog2" :title="title" :visible.sync="dialogFormVisible" width="650px">
        <el-form :model="form" :label-position="labelPosition" size="small" ref="formRef">
            <el-row :gutter="50">
                <el-col :span="12">
                    <el-form-item prop="username">
                        <span slot="label">用户名 (主要用于登录)</span>
                        <el-input autocomplete="off" v-model="form.username" placeholder="请输入用户名"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="operate_uid">
                        <span slot="label">所属管理 (超级管理员/运营专员列表)</span>
                        <el-select v-model="form.operate_uid" placeholder="请选择">
                            <el-option v-for="item in departmentlist" :key="item.id" :label="item.username"
                                       :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="50">
                <el-col :span="12">
                    <el-form-item prop="password">
                        <span slot="label">密码 (用户密码不能少于6位数)</span>
                        <el-input autocomplete="off" v-model="form.password" placeholder="请输入密码"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="password2">
                        <span slot="label">确认密码 (确认密码要和密码一致)</span>
                        <el-input autocomplete="off" v-model="form.password2" placeholder="请输入确认密码"></el-input>
                    </el-form-item>
                </el-col>

            </el-row>
            <el-row :gutter="50">
                <el-col :span="12">
                    <el-form-item prop="mobile">
                        <span slot="label">手机 (找回密码等操作)</span>
                        <el-input autocomplete="off" v-model="form.mobile" placeholder="请输入手机号码"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="weixin">
                        <span slot="label">微信 (用户微信,可空)</span>
                        <el-input autocomplete="off" v-model="form.weixin" placeholder="请输入用户微信"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="50">
                <el-col :span="12">
                    <el-form-item prop="qq">
                        <span slot="label">QQ (用户qq,可空)</span>
                        <el-input autocomplete="off" v-model="form.qq" placeholder="请输入用户qq"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="position">
                        <span slot="label">账号类型/职位 (运营专员 或者 客户账号)</span>
                        <!-- <el-input autocomplete="off" v-model="form.user_type" placeholder="请输入部门/职位"></el-input> -->
                        <el-select v-model="form.user_type" placeholder="请选择账号类型">
                            <el-option v-for="item in typelist" :key="item.value" :label="item.label"
                                       :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="50">
                <el-col :span="12">
                    <el-form-item prop="group_id">
                        <span slot="label">账号权限</span>
                        <!-- <el-input autocomplete="off" v-model="form.position" placeholder="请输入部门/职位"></el-input> -->
                        <el-select v-model="form.group_id" placeholder="请选择账号权限">
                            <el-option v-for="item in rolelist" :key="item.id" :label="item.name"
                                       :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="avatar">
                        <span slot="label">用户头像</span>
                        <el-upload
                                class="upload-demo"
                                action="https://pm.ab0769.com/api/common/upload"
                                :limit="1"
                                :auto-upload="true"
                                :on-preview="handlePreview"
                                :on-remove="handleRemove"
                                :on-success="on_success"
                                :file-list="file_list"
                                list-type="picture-card">
                            <el-button size="mini" type="text" icon="el-icon-plus"></el-button>
                        </el-upload>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false" size="small">取 消</el-button>
            <el-button type="primary" @click="submits()" size="small">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script>
    import {Message} from 'element-ui';
    export default {
        data() {
            return {
                dialogFormVisible: false,
                labelPosition: "top",
                title: "",
                departmentlist: [],
                typelist: [],
                rolelist: [],
                file_list:[],
                form: {
                    id: "",
                    "username":"",
                    "mobile":"",
                    "password":"",
                    "password2":"",
                    "qq":"",
                    "operate_uid":"",
                    "group_id":"",
                    "weixin":"",
                    "user_type":"",
                    "avatar":"",
                }
            };
        },
	
		mounted() {
			window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
		},
		
        methods: {
			 beforeunloadHandler (e) {
				 alert(1)
			this.file_list=[];
			this.form.avatar='';
			 },
			handleRemove(e){
				this.file_list=[];
				this.form.avatar='';
			},
			handlePreview(e){
				
			},
            init(id) {
               this.file_list=[];
               this.form.avatar='';
                this.title = id ? "编辑账号" : "新增账号";
                this.dialogFormVisible = true;
                this.form.id = '';
                setTimeout(() => { // DOM未渲染，所以开个定时器
                    this.$refs['formRef'].resetFields(); // 重置表单
                }, 30);

                this.$http.post("users/plists").then((response) => {
                    this.departmentlist=response.data.records;
                });

                this.$http.post("common/usertypes").then((response) => {
                    this.typelist=response.data;
                });

                this.$http.post("users/roles").then((response) => {
                    this.rolelist=response.data.records;
                });

                if (id) {
                    this.form.id = id;
					this.$http.post("users/info",{'id':id}).then((response) => {
								
                        this.form=response.data.info;
						 this.form.password='';
                        //delete this.form.url;
                        this.file_list.push({
                            'name':"url.jpg",
                            'url':this.form.avatar
                        });
					});
				}


            },
            submits() {
                var thas=this;
                this.$refs['formRef'].validate((valid) => {
                    if (valid) {
						var path="users/add"
                      if(this.form.id>0){
						  path='users/edit'
					  }
					  this.$http.post(path,this.form).then((response) => {
					  		
							Message({
								type: 'success',
								message: '保存成功'
							});
							this.file_list=[];
							this.form.avatar='';
							 setTimeout(() => {
                                 console.log('ss submit!!');
								thas.$emit("refreshDataList");
							}, 1500) 
					  });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            on_success(response){
				console.log(response)
				this.file_list.push({
					'name':"url.jpg",
					'url':response.data.fullurl,
				});
				this.form.avatar=response.data.fullurl;
			},
        },
    };
</script>

<style lang="scss">
    .edit-dialog2 {
        .el-dialog__body {
            padding-top: 0 !important;
        }

        .el-form-item {
            margin-bottom: 5px !important;
        }

        .el-form--label-top .el-form-item__label {
            padding-bottom: 0 !important;
        }

        .el-upload--picture-card, .el-upload-list--picture-card .el-upload-list__item {
            width: 62px;
            height: 62px;
            line-height: 60px;
        }
    }
</style>
